<template>
  <div class="tops">
    <div class="position-top">
      <van-nav-bar title="值得买" class="title">
        <template #left>
          <router-link to="/home"
            ><van-icon name="wap-home-o" size="28" color="#545353"
          /></router-link>
        </template>
        <template #right>
          <router-link to="/search"
            ><van-icon name="search" size="28" color="#545353"
          /></router-link>
          <router-link to="/shopcart">
            <van-icon name="shopping-cart-o" size="28" color="#545353" />
          </router-link>
        </template>
      </van-nav-bar>
    </div>
  </div>
  <div class="recommendContainer">
    <div class="m-swiperTab-container">
      <div class="navTop">
        <van-image
          class="image0"
          width="65"
          height="35"
          src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
        />
        <div class="u-text">严选好物&nbsp;用心生活</div>
        <van-image
          class="iamge1"
          src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
        />
      </div>
      <div class="m-swiper">
        <div class="swiper-container">
          <van-swipe
            class="swiper-S"
            :loop="false"
            :show-indicators="false"
            :stop-propagation="false"
            :width="88.75"
            :style="{ marginLeft: translateX, transitionDuration: transition }"
            @touchstart.passive="handlerStart"
            @touchmove.passive="handlerMove"
            @touchend="handlerEnd"
          >
            <van-swipe-item
              class="swiper-item"
              v-for="(item, index) in List"
              :key="index"
            >
              <div class="column">
                <div class="item" v-for="(item1, index) in item" :key="index">
                  <a :href="item1.columnUrl">
                    <van-image
                      round
                      class="image0"
                      width="60"
                      height="60"
                      :src="item1.picUrl"
                    />
                  </a>
                  <div class="T1">{{ item1.mainTitle }}</div>
                  <div class="T2">{{ item1.viceTitle }}</div>
                </div>
              </div>
            </van-swipe-item>
            <template #indicator="{ active }">
              <div class="custom-indicator">
                <div
                  :style="{
                    width: '20px',
                    height: '2px',
                    backgroundColor: 'red',
                    borderRadius: '1px',
                    marginLeft: active * 20 + 'px',
                  }"
                ></div>
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="pubu">
      <div class="pubuContainer">
        <div
          class="left"
          v-masonry
          fit-width="false"
          transition-duration="0.1s"
          item-selector=".item-block"
          gutter="10"
          origin-left="false"
        >
          <div
            class="item-block"
            v-masonry-tile
            v-for="(item, index) in MasonryList"
            :key="index"
          >
            <div class="item-container">
              <a :href="'https://m.you.163.com' + item.schemeUrl">
                <van-image :src="item.picUrl" width="100%" />
              </a>
              <div class="item-text">{{ item.title }}</div>
              <div class="item-span"></div>
              <div class="item-user">
                <div class="user-info">
                  <van-image round width="24" height="24" :src="item.avatar" />
                  <div class="user-name">{{ item.nickname }}</div>
                </div>
                <div class="user-uparea">
                  <img
                    class="user-img"
                    src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                    alt=""
                  />
                  <div class="user-text">
                    {{
                      item.readCount > 10000
                        ? Math.ceil(item.readCount / 1000) + "k"
                        : item.readCount
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reqMasonryList } from "../../api/recommend";
import { useRecommendStore } from "../../store/recommend";
import { onMounted, ref } from "vue";
let Flag = ref(false);
let lastScrollPosition = 0;
let page = ref(2);
let size = ref(1);
let translateX = ref("" as any);
let transition = ref("" as any);
let startX: number;
const store = useRecommendStore();
const MasonryList = ref([] as any[]);

const List = store.$state.recommend;
onMounted(async () => {
  getData();
  store.getSwiperList();
});

window.onscroll = () => {
  const currentScrollPosition = window.scrollY;
  // 检查是否滚动到了页面底部
  if (
    window.innerHeight + window.scrollY >= document.body.offsetHeight &&
    currentScrollPosition > lastScrollPosition
  ) {
    // 发送请求
    if (!Flag.value) {
      getData();
    }
  }
  // 保存当前滚动位置
  lastScrollPosition = currentScrollPosition;
};

const getData = async () => {
  // 正在发送请求
  Flag.value = true;
  let {
    data: { result },
  } = await reqMasonryList(page.value++, size.value);
  MasonryList.value = MasonryList.value.concat(result[0].topics, [
    result[0].look,
  ]);
  Flag.value = false;
};

// 手指按下
const handlerStart = (event: any) => {

  // 获取手指的初始位置
  // 获取手指的初始位置
  startX = event.changedTouches[0].clientX;
  transition.value = "";
};
// 手指移动
const handlerMove = (event: any) => {
  let endX = event.changedTouches[0].clientX;
  let disX = endX - startX;

  if (disX > 340) {
    disX = 340;
  } else if (disX < -260) {
    disX = -260;
  }
  if (disX > 100 || disX < -100) {
    translateX.value = disX + "px";
  }
};
// 手指抬起
const handlerEnd = () => {
  translateX.value = "";
  transition.value = "300ms";
};
</script>

<script lang="ts">
export default {
  name: "recommend",
};
</script>

<style lang="scss" scoped>
:deep(.van-swipe) {
  position: static;
  transform: none;
}
:deep(.van-nav-bar__title) {
  font-weight: 500;
  font-size: 18px;
}
:deep(.van-nav-bar) {
  --van-nav-bar-height: 50px;
  width: 100%;
}
:deep(.van-icon-search) {
  margin-right: 10px;
}

.tops {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .position-top {
    width: 100%;
    height: 50px;
  }
}

.recommendContainer {
  position: relative;
  margin-top: 50px;
  width: 100%;
  background-color: #eeeeee;
  .pubu {
    width: 100%;
    background-color: #eee;
    .pubuContainer {
      width: 355px;
      min-height: 500px;
      box-sizing: border-box;
      margin: 0 auto;
      margin-top: 15px;
      margin-bottom: 50px;
      justify-content: space-between;
      display: flex;

      .left {
        width: 172.5px;
        .item-block {
          width: 172.5px;
          margin-bottom: 10px;
          .item-container {
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
            border-radius: 8px;
            align-items: center;
            overflow: hidden;
            .item-text {
              padding: 9px 8px 0;
              color: #333;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: PingFangSC-Regular;
              text-align: left;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              margin-top: -5px;
            }
            .item-span {
              width: 171.5px;
              height: 8.5px;
            }
            .item-user {
              font-size: 12px;
              padding: 8.5px 8px 12px;
              display: flex;
              justify-content: space-between;
              .user-uparea {
                width: 50px;
                flex-direction: row;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .user-img {
                  width: 16px;
                }
                .user-text {
                  font-size: 12px;
                  color: #7f7f7f;
                  width: 25.6px;
                  max-width: 45px;
                  text-align: left;
                  margin-left: 1px;
                  height: 16px;
                  line-height: 16px;
                }
              }
              .user-info {
                display: flex;
                flex-direction: row;
                justify-content: right;
                .user-name {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 11px;
                  color: #7f7f7f;
                  height: 24px;
                  line-height: 24px;
                  margin-left: 4px;
                }
              }
            }
          }
        }
      }
      .right {
        width: 172.5px;
        .item-block {
          width: 100%;
          margin-bottom: 10px;
          .item-container {
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
            border-radius: 8px;
            align-items: center;
            overflow: hidden;
            .item-text {
              padding: 9px 8px 0;
              color: #333;
              font-size: 14px;
              line-height: 10px;
              flex-wrap: wrap;
              box-lines: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: PingFangSC-Regular;
              text-align: left;
            }
            .item-span {
              width: 171.5px;
              height: 8.5px;
            }
            .item-user {
              font-size: 12px;
              padding: 8.5px 8px 12px;
              display: flex;
              justify-content: space-between;
              .user-uparea {
                width: 50px;
                flex-direction: row;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .user-text {
                  font-size: 12px;
                  color: #7f7f7f;
                  width: 25.6px;
                  max-width: 45px;
                  text-align: right;
                  height: 16px;
                  line-height: 16px;
                  margin-left: 1px;
                }
              }
              .user-info {
                display: flex;
                flex-direction: row;
                justify-content: right;
                .user-name {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 11px;
                  color: #7f7f7f;
                  height: 24px;
                  line-height: 24px;
                  margin-left: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
  .m-swiperTab-container {
    position: relative;
    height: 342.5px;
    background-color: #eee;
    .navTop {
      top: 0;
      left: 0;
      position: absolute;
      height: 259px;
      width: 375px;
      :deep(.image0) {
        position: absolute;
        top: 30px;
        left: 6px;
        z-index: 1;
      }
      :deep(.iamge1) {
        position: absolute;
        width: 375px;
        height: 259px;
      }
      .u-text {
        position: absolute;
        font-size: 15px;
        line-height: 22px;
        height: 22px;
        font-family: PingFangSC-Regular;
        left: 73px;
        top: 39.5px;
        color: #fff;
        z-index: 1;
      }
    }
    .m-swiper {
      position: absolute;
      padding-top: 72.5px;
      width: 375px;
      height: 270px;
      .swiper-container {
        position: relative;
        width: 355px;
        height: 270px;
        margin: 0 10px;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        .swiper-S {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          height: 270px;
          transition-duration: 300ms;
          .custom-indicator {
            position: absolute;
            width: 80px;
            height: 2px;
            margin-left: -50px;
            bottom: 10px;
            left: 50%;
            font-size: 12px;
            background: rgba(217, 11, 11, 0.1);
          }
          .swiper-item {
            width: 88.75px;
            flex-grow: 1;
            padding-top: 4px;

            .column {
              text-align: center;
              padding: 3px;
              width: 84px;
              background: #fff;

              border-radius: 8px;

              .item {
                width: 84px;
                margin-top: 14px;

                background: #fff;
                .T1 {
                  font-family: PingFang-SC-Bold;
                  font-weight: 700;
                  font-size: 14px;
                  width: 84px;
                  letter-spacing: -1px;
                  height: 20px;
                  white-space: nowrap;
                  overflow: hidden;
                  color: #333;
                  text-align: center;
                  line-height: 20px;
                }
                .T2 {
                  width: 84px;
                  margin-top: 1px;
                  font-family: PingFangSC-Regular;
                  font-size: 10px;
                  color: #999;
                  text-align: center;
                  height: 15px;
                  line-height: 15px;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
